<template>
  <!-- 扫码入库页面容器 -->
  <div class="scan-storage-container">
    <!-- 页面标题 -->
    <el-page-header
      title="返回订单管理"
      content="扫码入库"
      @back="handleBack"
      class="page-header"
    />

    <!-- 扫码入库卡片 -->
    <el-card class="scan-card">
      <template #header>
        <div class="card-header">
          <span>扫码入库操作</span>
        </div>
      </template>

      <!-- 扫码区域 -->
      <div class="scan-section">
        <el-input
          v-model="scanOrderNumber"
          placeholder="请扫描订单编号或输入订单号后按回车"
          @keyup.enter="handleScanEnter"
          class="scan-input"
          ref="scanInputRef"
          :disabled="saveLoading"
        >
          <template #prepend>
            <el-icon><Document /></el-icon>
            订单编号
          </template>
        </el-input>
        <el-button
          type="success"
          @click="handleScanEnter"
          class="scan-button"
          :loading="saveLoading"
        >
          确认入库
        </el-button>
      </div>

      <!-- 操作说明 -->
      <div class="instructions">
        <el-alert
          title="操作说明"
          type="info"
          description="使用扫描枪扫描订单编号，或手动输入订单编号后按回车键，系统将自动将该订单状态更新为已入库。"
          show-icon
          :closable="false"
        />
      </div>

      <!-- 最近操作记录 -->
      <div class="recent-operations" v-if="operationHistory.length > 0">
        <h3>最近操作记录</h3>
        <el-table :data="operationHistory" border style="width: 100%">
          <el-table-column prop="orderNumber" label="订单编号" width="150" />
          <el-table-column prop="status" label="操作结果" width="120">
            <template #default="{ row }">
              <el-tag :type="row.success ? 'success' : 'danger'">
                {{ row.success ? '成功' : '失败' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="信息" />
          <el-table-column prop="time" label="操作时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.time) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 扫码入库页面组件
 * 专门用于通过扫描订单编号将订单状态更新为已入库
 */

// 从Vue中导入所需的API
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 从Element Plus导入组件和API
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// 导入订单相关的API函数
import { getOrderList, updateOrder } from '@/api/SalesOrders'

// 获取路由实例
const router = useRouter()

// 响应式数据定义
const scanOrderNumber = ref('')     // 扫码输入的订单编号
const scanInputRef = ref(null)      // 扫码输入框引用
const saveLoading = ref(false)      // 保存按钮加载状态
const operationHistory = ref([])    // 操作历史记录

/**
 * 格式化日期显示
 * @param {Date} date - 日期对象
 * @returns {string} 格式化后的日期时间
 */
const formatDate = (date) => {
  if (!date) return '-'
  const d = new Date(date)
  return d.toLocaleString('zh-CN')
}

/**
 * 处理返回按钮点击
 */
const handleBack = () => {
  router.push('/orders')
}

/**
 * 添加操作记录到历史
 * @param {string} orderNumber - 订单编号
 * @param {boolean} success - 操作是否成功
 * @param {string} message - 操作信息
 */
const addOperationRecord = (orderNumber, success, message) => {
  operationHistory.value.unshift({
    orderNumber,
    success,
    message,
    time: new Date()
  })

  // 限制历史记录数量为10条
  if (operationHistory.value.length > 10) {
    operationHistory.value.pop()
  }
}

/**
 * 处理扫码入库
 */
const handleScanEnter = async () => {
  if (!scanOrderNumber.value) {
    ElMessage.warning('请输入订单编号')
    return
  }

  try {
    // 设置加载状态
    saveLoading.value = true

    // 根据订单编号获取订单详情
    const response = await getOrderList({
      orderNumber: scanOrderNumber.value,
      page: 1,
      pageSize: 1
    })
    // 检查是否找到订单
    if (response.data && response.data.orders && response.data.orders.length > 0) {
      const order = response.data.orders[0]

      // 检查订单当前状态，避免重复入库
      if (order.status === 3) { // 3是已入库状态
        const message = '该订单已经是已入库状态'
        ElMessage.warning(message)
        addOperationRecord(scanOrderNumber.value, false, message)
        return
      }

      // 更新订单状态为已入库（状态值3）
      const updateData = {
        order_id: order.order_id,
        status: 3 // 已入库状态
      }

      await updateOrder(updateData)

      const message = `订单 ${scanOrderNumber.value} 已成功入库！`
      ElMessage.success(message)
      addOperationRecord(scanOrderNumber.value, true, message)

      // 清空输入框
      scanOrderNumber.value = ''

      // 聚焦到输入框，方便继续扫码
      setTimeout(() => {
        if (scanInputRef.value) {
          scanInputRef.value.focus()
        }
      }, 100)
    } else {
      const message = '未找到订单编号为 ' + scanOrderNumber.value + ' 的订单'
      ElMessage.error(message)
      addOperationRecord(scanOrderNumber.value, false, message)
    }
  } catch (error) {
    console.error('扫码入库失败:', error)
    const message = '扫码入库失败：' + (error.msg || error.message || '请稍后重试！')
    ElMessage.error(message)
    addOperationRecord(scanOrderNumber.value, false, message)
  } finally {
    saveLoading.value = false
  }
}

// 组件挂载时聚焦到扫码输入框
onMounted(() => {
  // 聚焦到扫码输入框
  setTimeout(() => {
    if (scanInputRef.value) {
      scanInputRef.value.focus()
    }
  }, 300)
})
</script>

<style scoped>
/**
 * 扫码入库页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 页面容器样式 */
.scan-storage-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

/* 扫码卡片样式 */
.scan-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

/* 扫码区域样式 */
.scan-section {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  align-items: center;
}

/* 扫码输入框样式 */
.scan-input {
  flex: 1;
}

/* 扫码按钮样式 */
.scan-button {
  white-space: nowrap;
}

/* 操作说明样式 */
.instructions {
  margin-bottom: 30px;
}

/* 最近操作记录样式 */
.recent-operations {
  margin-top: 30px;
}

.recent-operations h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .scan-storage-container {
    padding: 10px;
  }

  /* 扫码区域响应式适配 */
  .scan-section {
    flex-direction: column;
    align-items: stretch;
  }

  .scan-button {
    width: 100%;
  }
}
</style>
